<script>
import {Carousel3d, Slide} from 'vue-carousel-3d'

export default {
  components: {
    Carousel3d,
    Slide
  },
  data() {
    return {
      currentSlideIndex: 1,
      items: [],
      dialogImg: '',
      showDialog: false,
      dialogVideo: '',
      imgShow: true,
      roleName: ''
    }
  },
  computed: {
    turnList() {
      if (!this.roleName) {
        return this.items
      }
      let arr = this.items.filter(it => {
        return it.name.indexOf(this.roleName) !== -1
      })
      console.log(arr, '%c index.vue 28 [ arr ]: ', 'color: #bf2c9f; background: pink; font-size: 13px;',)
      return arr
    }
  },
  mounted() {
    this.list()
  },
  methods: {
    close() {
      this.$router.push('/')
    },
    list() {
      let list = JSON.parse(JSON.stringify(this.$roleDb.get('data').value()))
      list.forEach(item => {
        item.videoUrl = new URL(item.videoUrl);
      })
      this.items = list
    },
    imgClick(it) {
      this.imgShow = true
      this.showDialog = true
      let item = this.turnList[it.index]
      this.dialogVideo = item.videoUrl
      setTimeout(() => {
        this.imgShow = false
      }, 1100)
    },
    closeDialog() {
      this.showDialog = false
      this.imgShow = false
    }
  }
}
</script>

<template>
  <div class="role">
    <img class="back" src="../../assets/back.png" @click="close"/>
    <div class="input" style="padding: 20px; text-align: center" v-show="!showDialog">
      <input type="text" v-model="roleName" style="background:transparent;border:none;border-bottom:1px solid black;"/>
    </div>
    <div v-show="!showDialog" class="box">
      <carousel-3d :autoplay="false" :clickable="true" :onMainSlideClick="imgClick" display="3" height="480px"
                   space="400"
                   width="270px">
        <slide v-for="(slide, i) in turnList" :key="i" :index="i">
          <!--          <video controls height="100%" disabled="true">-->
          <!--            <source :src="slide.videoUrl" type="video/mp4" disabled="true">-->
          <!--            <source :src="slide.videoUrl" type="video/ogg" disabled="true">-->
          <!--            <source :src="slide.videoUrl" type="video/webm" disabled="true">-->
          <!--          </video>-->
          <div class="model"
               style="height:100%;width:100%;position: absolute;top:0;left:0;background: rgba(0,0,0,0.4);)">
            <h3 class="videoTitle"
                style="position: absolute;top:50%;left:50%;transform: translate(-50%,-50%);color: #7b08f8;font-size: 2rem">
              {{ slide.name }}</h3>
            <img :src="slide.imgUrl" alt="" height="100%" width="100%">
          </div>
        </slide>
      </carousel-3d>
    </div>
    <div v-if="showDialog" class="dialog">
      <img class="back" src="../../assets/back.png" style="z-index: 9999" @click="closeDialog"/>
      <div :class="{full:showDialog}" class="content">
        <div :style="{opacity:!imgShow?0:1}" style="height:100%;width: 100%;background: rgba(0,0,0,.4)"></div>
        <video :style="{opacity:!imgShow?1:0}" controls height="100%" autoplay="false">
          <source :src="dialogVideo" type="video/mp4">
          <source :src="dialogVideo" type="video/ogg">
          <source :src="dialogVideo" type="video/webm">
        </video>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.model:hover .videoTitle {
  display: block;
}

.videoTitle {
  display: none;
}

.role {
  width: 100%;
  height: 100%;
  background: #0ce501;

  .content {
    div {
      opacity: 1;
      transition: opacity 1s;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    video {
      opacity: 0;
      transition: opacity 1s;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }

  .full {
    animation: toBig .3s ease-in-out;
    animation-fill-mode: forwards;
  }

  .normal {
    animation: toNormal .3s ease-in-out;
    animation-fill-mode: forwards;
  }

  @keyframes toNormal {
    100% {
      width: 270px;
      height: 480px;
    }

    0% {
      height: 100%;
      width: 100%;
    }
  }

  @keyframes toBig {
    0% {
      width: 270px;
      height: 480px;
    }

    100% {
      height: 100%;
      width: 100%;
    }
  }

  .dialog {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    .content {
      width: 270px;
      height: 480px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      object-fit: contain;
    }
  }

  .box {
    width: 100%;
    /* height: 100%; */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

.back {
  position: absolute;
  top: 20px;
  right: 15px;
  height: 37px;
  cursor: pointer;
}

//.carousel-inner {
//  display: flex;
//  transition: transform 0.3s;
//}
//.carousel-item {
//  width: 80%;
//  flex-shrink: 0;
//}
</style>